import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, message, Button, Col, Spin, Anchor, Row } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import HdlRemark from '@/pages/components/HdlRemark';
import downloadFile, { getFileName } from '@/utils/utils';
import ServiceRemark from '../../components/ServiceRemark';

const { Description } = DescriptionList;
const { Link } = Anchor;

@connect(({ card: { detail, detailHdl }, loading }) => ({
  detail,
  detailHdl,
  loading: loading.effects['card/fetchDetail'],
}))
class BasicProfile extends Component {
  state = {
    visHdlRemark: false,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const { insCardHdlId } = location.query;
    dispatch({
      type: 'card/fetchDetail',
      payload: { insCardHdlId },
    });
  }

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      visHdlRemark: !!flag,
    });
  };

  // 提交数据
  submitData = values => {
    const { dispatch, location } = this.props;
    const { insCardHdlId } = location.query;
    dispatch({
      type: 'card/addHdlRemarkDel',
      payload: { ...values, busiId: insCardHdlId },
      callback: response => {
        if (response.success) {
          message.success('办理备注成功！');
          this.handleModalVisible();
        } else {
          message.warning(`${response.message || '办理备注失败！'}`);
        }
      },
    });
  };

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <div key={item.split('|')[0]}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </div>
      );
    });

  getVal = value => {
    if (value.inpVal) {
      if (Number(value.inpType) === 9 && value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (Number(value.inpType) === 9 && value.inpVal === '[]') {
        return '--';
      }
      return this.commanName(value);
    }
    return '--';
  };

  commanName = item => (item.inpVal ? `${item.inpVal}` : '--');

  hdlRemark = () => {
    const { dispatch, location } = this.props;
    const { insCardHdlId } = location.query;
    this.handleModalVisible(true);
    dispatch({
      type: 'card/detailHdlRemark',
      payload: { busiId: insCardHdlId },
    });
  };

  render() {
    const { detail, detailHdl, loading } = this.props;
    const { empSendInfoVo, empBaseInfoVo, matlist, remarklist, insCardHdl } = detail;
    const { visHdlRemark } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Anchor onClick={this.handleClick} targetOffset={50}>
            <Row type="flex" justify="space-around">
              <Col>
                <Link href="#sendInfor" title="派单信息" />
              </Col>
              <Col>
                <Link href="#basicma" title="基本信息" />
              </Col>
              <Col>
                <Link href="#materialInfor" title="材料信息" />
              </Col>
              <Col>
                <Link href="#masterInfor" title="发放信息" />
              </Col>

              <Col>
                <Link href="#hdlRemark" title="办理备注" />
              </Col>
            </Row>
          </Anchor>
          <Card
            title={<span id="sendInfor">派单信息</span>}
            // style={{ marginBottom: 16 }}
            // bordered={false}
          >
            <DescriptionList>
              <Description term="签约方 ">
                {empSendInfoVo.sendCorpName ? empSendInfoVo.sendCorpName : '--'}
              </Description>
              <Description term="客户名称">
                {empSendInfoVo.custName ? empSendInfoVo.custName : '--'}
              </Description>
              <Description term="执行地">
                {empSendInfoVo.areaName ? empSendInfoVo.areaName : '--'}
              </Description>
              <Description term="派单时间">
                {empSendInfoVo.sendDate
                  ? moment(empSendInfoVo.sendDate).format('YYYY-MM-DD HH:mm')
                  : null}
              </Description>
              <Description term="在职状态">
                {empSendInfoVo.entryStatusName ? empSendInfoVo.entryStatusName : '--'}
              </Description>
              <Description term="所属客服">
                {empSendInfoVo.blngCs ? empSendInfoVo.blngCs : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span id="basicma">基本信息</span>}>
            <DescriptionList>
              <Description term="姓名">
                {empBaseInfoVo.empName ? empBaseInfoVo.empName : '--'}
              </Description>
              <Description term="证件类型">
                {empBaseInfoVo.certTypeName ? empBaseInfoVo.certTypeName : '--'}
              </Description>
              <Description term="证件号">
                {empBaseInfoVo.certNo ? empBaseInfoVo.certNo : '--'}
              </Description>
              <Description term="性别">
                {empBaseInfoVo.genderName ? empBaseInfoVo.genderName : '--'}
              </Description>
              <Description term="国籍">
                {empBaseInfoVo.nationName ? empBaseInfoVo.nationName : '--'}
              </Description>
              <Description term="出生日期">
                {empBaseInfoVo.birthDate
                  ? moment(empBaseInfoVo.birthDate).format('YYYY-MM-DD')
                  : '--'}
              </Description>
              <Description term="电话">
                {empBaseInfoVo.mobile ? empBaseInfoVo.mobile : '--'}
              </Description>
              <Description term="员工邮箱">
                {empBaseInfoVo.email ? empBaseInfoVo.email : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card title={<span id="materialInfor">材料信息</span>}>
            {insCardHdl.coltFlag && String(insCardHdl.coltFlag) === '1' ? (
              <DescriptionList>
                <Description term="原件材料">
                  {insCardHdl.masterFileName ? insCardHdl.masterFileName : '--'}
                </Description>
                <Description term="复印件材料">
                  {insCardHdl.copyFileName ? insCardHdl.copyFileName : '--'}
                </Description>
                <Description term="材料是否完整">{insCardHdl.matFlagName}</Description>
                {matlist && matlist.length
                  ? matlist.map(item => (
                      // eslint-disable-next-line react/jsx-indent
                      <Description
                        key={item.matId}
                        term={item.matName}
                        style={{ wordBreak: 'break-all' }}
                      >
                        {this.getVal(item)}
                        {/* {item.inpVal} */}
                      </Description>
                    ))
                  : null}
              </DescriptionList>
            ) : (
              <DescriptionList>
                <Description term="材料是否完整">不需要材料</Description>
              </DescriptionList>
            )}
          </Card>
          <Card title={<span id="masterInfor">发放信息</span>}>
            <DescriptionList>
              <Description term="发放方式">
                {insCardHdl.issWayName ? insCardHdl.issWayName : '--'}
              </Description>
              <Description term="邮寄地址">
                {insCardHdl.exprsAddr ? insCardHdl.exprsAddr : '--'}
              </Description>
              <Description term="快递单号">
                {insCardHdl.exprsNo ? insCardHdl.exprsNo : '--'}
              </Description>
              <Description term="快递公司">
                {insCardHdl.exprsCorpName ? insCardHdl.exprsCorpName : '--'}
              </Description>
              <Description term="备注">
                {insCardHdl.issRemark ? insCardHdl.issRemark : '--'}
              </Description>
              <Description term="操作时间">
                {insCardHdl.operTime
                  ? moment(insCardHdl.operTime).format('YYYY-MM-DD HH:mm')
                  : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <div id="hdlRemark">
            <HdlRemark hdlRemark={remarklist} />
          </div>
        </Spin>
        <ServiceRemark
          visHdlRemark={visHdlRemark}
          handleModalVisible={this.handleModalVisible}
          submitData={this.submitData}
          detailHdl={detailHdl}
        />
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.hdlRemark} style={{ marginRight: 8 }}>
            添加办理备注
          </Button>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default BasicProfile;
